<template>
    <div>
        <el-tabs v-model="id">
            <el-tab-pane :label="name.nickname" :name="name.id" :key="name.id" v-for="name in $store.state.user.name">
                <div class="tag-inner-container" :key="tag.id" v-for="tag in $store.state.tag.tags[id]">
                    <el-tag class="tag-name" @click="$emit('selectTag', tag)" size="mini" closable @close="delTag(tag.id, tag.name)">{{tag.name}}</el-tag>
                </div>
                <LineInfo
                        class="add-tag"
                        field="标签"
                        placeholder="添加标签，多个标签之间用“,”隔开"
                        v-model="tags"
                        @updateField="addTag"
                        @resetField="resetTagInput"
                        v-if="id == $store.state.user.name[0].id"
                />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import LineInfo from "../My/UserInfo/LineInfo";
    import {stringify} from "qs";
    export default {
        name: "TagTabs",
        data(){
          return {
              tags: "",
              id: null,
          }
        },
        methods:{
            /**
             * 添加标签
             */
            async addTag(close){
                // 解析标签
                let tags = this.parseTags();
                if(tags != ""){
                    await this.$confirm(`添加标签：[${tags}]`, '退出登录', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(async () =>{
                        let params = stringify({tags: tags});
                        await this.$store.dispatch("tag/addTags", params);
                        await this.$store.dispatch("tag/listTags", this.id);
                        this.resetTagInput();
                        close();
                    }).catch(() => {

                    });
                }else{
                    close();
                }
            },
            /**
             * 删除标签
             */
            async delTag(id, name){
                // 解析标签
                await this.$confirm(`确定要删除标签：[${name}] 吗？`, '删除标签', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(async () =>{
                    let params = stringify({id: id});
                    await this.$store.dispatch("tag/delTag", params);
                    await this.$store.dispatch("tag/listTags", this.id);
                    this.resetTagInput();
                });
            },
            /**
             * 解析标签字符串
             */
            parseTags(){
                // 按照,（不区分中英文）分割
                let tags = this.tags.split(/[,，]/g);
                return tags.toString();
            },
            /**
             * 重置tag输入框的值
             */
            resetTagInput(){
                this.tags = "";
            },
            /**
             * 页面加载
             */
            async ready(){
                // 获取昵称
                await this.$store.dispatch("user/listNick");
                await this.$store.dispatch("tag/listTags", this.$store.state.user.name[0].id);
                this.id = this.$store.state.user.name[0].id;
            }
        },
        watch:{
          id:{
              immediate: false,
              async handler(newValue){
                  if(newValue != null){
                      if(newValue != 0){
                          // 获取标签列表
                          await this.$store.dispatch("tag/listTags", newValue);
                      }
                  }
              }
          }
        },
        async created() {
            this.ready();
        },
        components: {LineInfo}
    }
</script>

<style scoped>
    .tag-inner-container{
        padding: 0.5rem;
        display: inline-block;
    }
    .add-tag{
        margin-top: 1.5rem;
    }
    .tag-name:hover{
        cursor: pointer;
    }
</style>